import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button, Steps, Card, Upload, notification } from 'antd'
import { downloadFile, backUrl } from 'lib/fun'
import ErrorCitizen from './components/errorCitizen'
import BarInfo from 'components/barInfo'

const Step = Steps.Step;

class ModuleName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      url: {
        download: '/citizen/downAreaTemplate',
        upload: '/citizen/uploadAreaTemplate',
        downFailList: '/citizen/downAreaFailList',
        uploadBatchList: '/citizen/uploadAreaBatchList',
        failList: '/citizen/uploadAreaFailList',
      },
      errorVisible: false,
      showBar: false,
      barId: "",
      typeId: "",
    }
  }

  componentDidMount(){
    
  }

  componentWillUnmount(){
    notification.destroy();
  }

  download2 = () => {
    
  }

  download = () => {
    
  }
  
  render() {
    var self = this;
    const props = {
      name: 'file',
      multiple: true,
      showUploadList: false,
      action: backUrl(this.state.url.upload),
      data: {},
      onChange(info) {
        const status = info.file.status;
        if (status == 'uploading') {
          self.setState({
            showBar: true
          });
        }
        if (status === 'done') {
          var result = info.file.response;
          var result = info.file.response;
          // &&result.data.successCount&&result.data.successCount>0
          if(result.status == 1&&result.data){
            const data = result.data
            self.setState({
              showBar: true,
              barId: data.barId,
              typeId: data.typeId,
            });
          }else{
            notification.error({
              message: '文件上传失败',
              description: result.msg||"未知失败原因",
              duration: 60,
            });
            self.setState({
              showBar: false
            });
          }
        } else if (status === 'error') {
          message.error("文件上传失败");
          self.setState({
            showBar: false
          });
        }
      },
    };

    return (
      <div className="citizen out-content">
        <Row gutter={20}>
          <Col span={16}>
            <Card bordered={false} className="left h_">
              <Row gutter={20}>
                <Col span={20} offset={2}>
                  <Steps current={1}>
                    <Step title="下载模板" description="" />
                    <Step title="上传文件" description="" />
                    <Step title="查看结果" description="" />
                  </Steps>
                </Col>
              </Row>
            {/*
              <div className="back-message">
                <span><i></i>导入成功10个客户资料</span>
                <span className="error"><i></i>导入失败10个客户资料</span>
              </div>
            */}
            <div style={{height: 30}}></div>
              <div className="p">
                <Row>
                  <Col span={4}>
                    <div style={{textAlign: 'right'}}>步骤1：</div>
                  </Col>
                  <Col span={18}>
                    点击“下载模板”，使用Office2003以上版本打开模板； 
                  </Col>
                </Row>
              <div className="p">
              </div>
                <Row>
                  <Col span={4}>
                    <div style={{textAlign: 'right'}}>步骤2：</div>
                  </Col>
                  <Col span={18}>
                    对照模板字段要求，填写正确的姓名、原姓名、更新后的姓名
                  </Col>
                </Row>
              <div className="p">
              </div>
                <Row>
                  <Col span={4}>
                    <div style={{textAlign: 'right'}}>步骤3：</div>
                  </Col>
                  <Col span={18}>
                    点击“上传文件”，选择填写好的模板。
                  </Col>
                </Row>
              </div>
              <div className="btns-center">
                <Button type="primary" icon="download" size="large" onClick={()=>{
                  downloadFile(this.state.url.download)
                }}>下载模板</Button>
                <Upload {...props}>
                  <Button type="primary" icon="upload" size="large">上传文件</Button>
                </Upload>
                <span className="error-btn">
                  <Button type="primary" icon="cloud-download-o" size="large" onClick={()=>{
                    this.setState({errorVisible: true})
                  }}>查看失败记录</Button>
                </span>
              </div>
            </Card>
          </Col>
          <Col span={8}>
            <div className="right">
              <Card title="帮助" bordered={false} className="h_">
                <h3>批量更新卡号信息验证步骤：</h3>
                <div className="p">
                  <p>1、检查每条记录的每个字段是否符合格式规范，若不符合则该记录标记为失败，进入失败中心.</p>
                  <p>2、用户必填字段必须填写，否则该条记录不处理，进入失败中心；</p>
                  <p>3、系统通过身份证号码查找用户，查询结果:</p>
                  <p>（1）若不存在该用户，则标记为失败，进入失败中心；</p>
                  <p>（2）若存在该用户，则更新姓名；</p>
                  <p>4、如果需咨询其他问题，请联系管理员。</p>
                </div>
              </Card>
            </div>
          </Col>
        </Row>
        <ErrorCitizen
          visible={ this.state.errorVisible }
          onClose={ ()=>{
            this.setState({
              errorVisible: false
            });
          } }
          title='批量更新人员区划'
          downFailList={this.state.url.downFailList}
          uploadBatchList={this.state.url.uploadBatchList}
          failList={this.state.url.failList}
          type="uploadArea"
        />
        <BarInfo
          visible={this.state.showBar}
          barId={this.state.barId}
          typeId={this.state.typeId}
          onClose={()=>{this.setState({ showBar: false })}}
        />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({  }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(ModuleName)